<template>
	<BasePopup
		v-model="walletStore.walletUnlockShow"
		titleT="wallet.walletUnlock"
		titleIcon="wallet1">
		<div class="flex flex-col pt-10 px-[35px] pb-10">
			<BaseImage class="h-[220px] mb-10 mx-auto" src="wallet/unlock-wallet.png" />
			<div class="mb-[25px] text-xl text-center text-t-1">
				{{
					profileStore.lockWallet === 'mobile'
						? $t('wallet.walletUnlockDescMobile')
						: $t('wallet.walletUnlockDescEmail')
				}}
			</div>
			<KycEmail
				v-if="profileStore.lockWallet === 'email'"
				class="bg-bg-3"
				@clickEffect="walletStore.walletUnlockShow = false" />
			<KycMobile
				v-if="profileStore.lockWallet === 'mobile'"
				class="bg-bg-3"
				@clickEffect="walletStore.walletUnlockShow = false" />
		</div>
	</BasePopup>
</template>

<script setup lang="ts">
import { BaseImage, BasePopup } from '@/components/base'
import { useProfileStore, useWalletStore } from '@/store'
import KycMobile from '@/views/settings/verify/kyc-mobile.vue'
import KycEmail from '@/views/settings/verify/kyc-email.vue'

const profileStore = useProfileStore()
const walletStore = useWalletStore()
</script>

<style scoped></style>
